Cypress: Den ultimate guiden til ende-til-ende-testing for nettapplikasjoner

I dagens raskt utviklende landskap for nettutvikling er det avgjørende å sikre kvaliteten og påliteligheten til nettapplikasjoner. Ende-til-ende-testing (E2E) spiller en avgjørende rolle i å verifisere at alle komponentene i en applikasjon fungerer sømløst sammen fra brukerens perspektiv. Cypress har dukket opp som et ledende rammeverk for E2E-testing, og tilbyr en utviklervennlig opplevelse, kraftige funksjoner og utmerket ytelse. Denne omfattende guiden vil lede deg gjennom alt du trenger å vite for å komme i gang med Cypress og effektivt teste nettapplikasjonene dine.

Hva er Cypress?

Cypress er et neste generasjons testverktøy for frontend, bygget for den moderne weben. I motsetning til tradisjonelle testrammeverk som kjører tester i en nettleser, opererer Cypress direkte i nettleseren, noe som gir deg enestående kontroll og innsyn i applikasjonens atferd. Det er designet for å være raskt, pålitelig og enkelt å bruke, noe som gjør det til et populært valg blant utviklere og QA-ingeniører over hele verden. Cypress er skrevet i JavaScript og kjøres i nettleseren, noe som gjør det svært ytelsessterkt og gir enestående tilgang til applikasjonens interne deler.

Hovedfordeler med å bruke Cypress

• Utviklervennlig: Cypress har et rent og intuitivt API, som gjør det enkelt å skrive og feilsøke tester.
• Tidsreise: Cypress tar øyeblikksbilder av applikasjonens tilstand under hver testkommando, slik at du kan gå tilbake i tid og se nøyaktig hva som skjedde på et hvilket som helst tidspunkt.
• Sanntids-oppdatering: Cypress lastes automatisk inn på nytt når du gjør endringer i testene dine, og gir umiddelbar tilbakemelding.
• Automatisk venting: Cypress venter automatisk på at elementer skal bli synlige eller interagerbare før handlinger utføres, noe som eliminerer behovet for eksplisitte ventetider.
• Nettverkskontroll: Cypress lar deg stubbe nettverksforespørsler og -svar, slik at du kan simulere forskjellige scenarier og teste applikasjonens feilhåndtering.
• Feilsøkingsmuligheter: Cypress tilbyr utmerkede feilsøkingsverktøy, inkludert en kraftig feilsøker og detaljerte feilmeldinger.
• Tverrlesertesting: Cypress støtter flere nettlesere, inkludert Chrome, Firefox, Edge og Electron.
• Hodeløs testing: Kjør tester i hodeløs modus for raskere kjøring i CI/CD-miljøer.
• Innebygde påstander: Cypress tilbyr et rikt sett med innebygde påstander for å verifisere den forventede atferden til applikasjonen din.

Installasjon og oppsett

Å komme i gang med Cypress er enkelt. Slik installerer du det:

1. Forutsetninger: Sørg for at du har Node.js og npm (Node Package Manager) installert på systemet ditt. Du kan laste dem ned fra den offisielle Node.js-nettsiden.
2. Installer Cypress: Åpne terminalen eller kommandolinjen, naviger til prosjektmappen din og kjør følgende kommando:

            npm install cypress --save-dev
            

              
                Copy
              
            
          

3. Åpne Cypress: Når installasjonen er fullført, kan du åpne Cypress Test Runner ved å kjøre:

            npx cypress open
            

              
                Copy
              
            
          

Denne kommandoen vil starte Cypress Test Runner, som gir et grafisk grensesnitt for å kjøre og feilsøke testene dine.

Skrive din første Cypress-test

La oss lage en enkel test for å verifisere at et nettsteds hjemmeside lastes korrekt. Opprett en ny fil med navnet `example.cy.js` i `cypress/e2e`-mappen i prosjektet ditt.

            
// cypress/e2e/example.cy.js

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

            

              
                Copy
              
            
          

La oss bryte ned denne testen:

• `describe()`: Definerer en testsuite, som er en samling av relaterte tester.
• `it()`: Definerer et individuelt testtilfelle innenfor testsuiten.
• `cy.visit()`: Navigerer til den angitte URL-en.
• `cy.contains()`: Finner et element som inneholder den angitte teksten.
• `.click()`: Klikker på det valgte elementet.
• `cy.url()`: Henter den nåværende URL-en til siden.
• `.should()`: Gjør en påstand om tilstanden til applikasjonen.
• `cy.get()`: Velger et element ved hjelp av en CSS-velger.
• `.type()`: Skriver tekst inn i det valgte elementet.
• `.should('have.value', 'fake@email.com')`: Bekrefter at elementets verdi er lik 'fake@email.com'.

Kjør denne testen i Cypress Test Runner for å se den i aksjon. Du bør se nettleseren navigere til Cypress Kitchen Sink-nettstedet, klikke på "type"-lenken og verifisere URL-en.

Cypress-kommandoer

Cypress tilbyr et bredt spekter av kommandoer for å samhandle med applikasjonen din. Her er noen av de mest brukte kommandoene:

• `cy.visit(url)`: Navigerer til den angitte URL-en.
• `cy.get(selector)`: Velger et element ved hjelp av en CSS-velger.
• `cy.contains(content)`: Velger et element som inneholder den angitte teksten.
• `cy.click()`: Klikker på det valgte elementet.
• `cy.type(text)`: Skriver tekst inn i det valgte elementet.
• `cy.clear()`: Tømmer innholdet i et input- eller textarea-element.
• `cy.submit()`: Sender inn et skjema.
• `cy.check()`: Huker av en avmerkingsboks eller radioknapp.
• `cy.uncheck()`: Fjerner avhukingen for en avmerkingsboks.
• `cy.select(value)`: Velger et alternativ fra en nedtrekksmeny.
• `cy.scrollTo(position)`: Ruller siden til den angitte posisjonen.
• `cy.trigger(event)`: Utløser en DOM-hendelse på det valgte elementet.
• `cy.request(url, options)`: Gjør en HTTP-forespørsel til den angitte URL-en.
• `cy.intercept(route, handler)`: Avskjærer HTTP-forespørsler som samsvarer med den angitte ruten.
• `cy.wait(time)`: Venter i den angitte tiden.
• `cy.reload()`: Laster den nåværende siden på nytt.
• `cy.go(direction)`: Navigerer til forrige eller neste side i nettleserhistorikken.
• `cy.url()`: Henter den nåværende URL-en til siden.
• `cy.title()`: Henter tittelen på siden.
• `cy.window()`: Henter vindusobjektet.
• `cy.document()`: Henter dokumentobjektet.
• `cy.viewport(width, height)`: Angir størrelsen på visningsporten.

Dette er bare noen av de mange kommandoene som er tilgjengelige i Cypress. Se Cypress-dokumentasjonen for en fullstendig liste over kommandoer og deres alternativer.

Påstander i Cypress

Påstander (assertions) brukes til å verifisere den forventede atferden til applikasjonen din. Cypress tilbyr et rikt sett med innebygde påstander som du kan bruke til å sjekke tilstanden til elementer, URL, tittel og mer. Påstander lenkes etter Cypress-kommandoer ved hjelp av `.should()`-metoden.

Her er noen vanlige eksempler på påstander:

• `.should('be.visible')`: Bekrefter at et element er synlig.
• `.should('not.be.visible')`: Bekrefter at et element ikke er synlig.
• `.should('be.enabled')`: Bekrefter at et element er aktivert.
• `.should('be.disabled')`: Bekrefter at et element er deaktivert.
• `.should('have.text', 'forventet tekst')`: Bekrefter at et element har den angitte teksten.
• `.should('contain', 'forventet tekst')`: Bekrefter at et element inneholder den angitte teksten.
• `.should('have.value', 'forventet verdi')`: Bekrefter at et element har den angitte verdien.
• `.should('have.class', 'forventet klasse')`: Bekrefter at et element har den angitte klassen.
• `.should('have.attr', 'attributtnavn', 'forventet verdi')`: Bekrefter at et element har det angitte attributtet og verdien.
• `.should('have.css', 'css-egenskap', 'forventet verdi')`: Bekrefter at et element har den angitte CSS-egenskapen og verdien.
• `.should('have.length', forventet lengde)`: Bekrefter at et element har den angitte lengden (f.eks. antall elementer i en liste).

Du kan også lage egendefinerte påstander for å passe dine spesifikke behov.

Beste praksis for å skrive Cypress-tester

Å følge beste praksis kan hjelpe deg med å skrive mer vedlikeholdbare, pålitelige og effektive Cypress-tester. Her er noen anbefalinger:

• Skriv klare og konsise tester: Hver test bør fokusere på en spesifikk funksjonalitet eller scenario. Unngå å skrive altfor komplekse tester som er vanskelige å forstå og vedlikeholde.
• Bruk meningsfulle testnavn: Gi testene dine beskrivende navn som tydelig indikerer hva de tester.
• Unngå hardkoding av verdier: Bruk variabler eller konfigurasjonsfiler til å lagre verdier som kan endre seg over tid.
• Bruk egendefinerte kommandoer: Lag egendefinerte kommandoer for å kapsle inn gjenbrukbar logikk og gjøre testene dine mer lesbare.
• Isoler tester: Hver test bør være uavhengig av andre tester. Unngå å stole på tilstanden til applikasjonen fra tidligere tester.
• Rydd opp etter tester: Tilbakestill tilstanden til applikasjonen etter hver test for å sikre at påfølgende tester starter fra et rent utgangspunkt.
• Bruk data-attributter: Bruk data-attributter (f.eks. `data-testid`) for å velge elementer i testene dine. Data-attributter er mindre sannsynlig å endre seg enn CSS-klasser eller ID-er, noe som gjør testene dine mer motstandsdyktige mot endringer i brukergrensesnittet.
• Unngå eksplisitte ventetider: Cypress venter automatisk på at elementer skal bli synlige eller interagerbare. Unngå å bruke eksplisitte ventetider (f.eks. `cy.wait()`) med mindre det er absolutt nødvendig.
• Test brukerflyter: Fokuser på å teste brukerflyter i stedet for individuelle komponenter. Dette vil hjelpe deg med å sikre at applikasjonen din fungerer korrekt fra brukerens perspektiv.
• Kjør tester jevnlig: Integrer Cypress-tester i din CI/CD-pipeline og kjør dem jevnlig for å fange feil tidlig i utviklingsprosessen.

Avanserte Cypress-teknikker

Stubbing og mocking

Cypress lar deg stubbe nettverksforespørsler og -svar, slik at du kan simulere forskjellige scenarier og teste applikasjonens feilhåndtering. Dette er spesielt nyttig for å teste funksjoner som er avhengige av eksterne API-er eller tjenester.

For å stubbe en nettverksforespørsel kan du bruke `cy.intercept()`-kommandoen. For eksempel stubber koden nedenfor en GET-forespørsel til `/api/users` og returnerer et mock-svar:

            
cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

            

              
                Copy
              
            
          

Du kan deretter vente på den avskårne forespørselen ved å bruke `cy.wait('@getUsers')` og verifisere at applikasjonen din håndterer mock-svaret korrekt.

Arbeide med Local Storage og informasjonskapsler

Cypress tilbyr kommandoer for å samhandle med local storage og informasjonskapsler (cookies). Du kan bruke disse kommandoene til å sette, hente og tømme local storage og informasjonskapsler i testene dine.

For å sette et element i local storage kan du bruke `cy.window()`-kommandoen for å få tilgang til vindusobjektet og deretter bruke `localStorage.setItem()`-metoden. For eksempel:

            
cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

            

              
                Copy
              
            
          

For å hente et element fra local storage kan du bruke `cy.window()`-kommandoen og deretter bruke `localStorage.getItem()`-metoden. For eksempel:

            
cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

            

              
                Copy
              
            
          

For å sette en informasjonskapsel kan du bruke `cy.setCookie()`-kommandoen. For eksempel:

            
cy.setCookie('myCookie', 'myCookieValue')

            

              
                Copy
              
            
          

For å hente en informasjonskapsel kan du bruke `cy.getCookie()`-kommandoen. For eksempel:

            
cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

            

              
                Copy
              
            
          

Håndtering av filopplastinger

Cypress tilbyr en plugin kalt `cypress-file-upload` som forenkler filopplastinger i testene dine. For å installere plugin-en, kjør følgende kommando:

            npm install -D cypress-file-upload
            

              
                Copy
              
            
          

Deretter legger du til følgende linje i din `cypress/support/commands.js`-fil:

            
import 'cypress-file-upload';

            

              
                Copy
              
            
          

Du kan deretter bruke `cy.uploadFile()`-kommandoen for å laste opp en fil. For eksempel:

            
cy.get('input[type="file"]').attachFile('example.txt')

            

              
                Copy
              
            
          

Arbeide med IFrames

Testing av IFrames kan være vanskelig, men Cypress gir en måte å samhandle med dem på. Du kan bruke `cy.frameLoaded()`-kommandoen for å vente på at en IFrame skal lastes, og deretter bruke `cy.iframe()`-kommandoen for å få IFrame-ens dokumentobjekt.

            
cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

            

              
                Copy
              
            
          

Cypress og kontinuerlig integrasjon/kontinuerlig levering (CI/CD)

Å integrere Cypress i din CI/CD-pipeline er avgjørende for å sikre kvaliteten på applikasjonen din. Du kan kjøre Cypress-tester i hodeløs modus i ditt CI/CD-miljø. Slik gjør du det:

1. Installer Cypress: Sørg for at Cypress er installert som en avhengighet i prosjektet ditt.
2. Konfigurer CI/CD: Konfigurer din CI/CD-pipeline til å kjøre Cypress-tester etter hver bygging.
3. Kjør Cypress hodeløst: Bruk `cypress run`-kommandoen for å kjøre Cypress-tester i hodeløs modus.

Eksempel på CI/CD-konfigurasjon (ved hjelp av GitHub Actions):

            
name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

            

              
                Copy
              
            
          

Denne konfigurasjonen vil kjøre Cypress-tester hver gang kode blir pushet til `main`-grenen eller en pull-request blir opprettet mot `main`-grenen. `cypress-io/github-action`-handlingen forenkler prosessen med å kjøre Cypress-tester i GitHub Actions.

Feilsøking av Cypress-tester

Cypress tilbyr utmerkede feilsøkingsverktøy for å hjelpe deg med å identifisere og fikse problemer i testene dine. Her er noen tips for feilsøking av Cypress-tester:

• Bruk Cypress Test Runner: Cypress Test Runner gir et visuelt grensesnitt for å kjøre og feilsøke testene dine. Du kan gå gjennom testene dine én kommando om gangen, inspisere tilstanden til applikasjonen og se detaljerte feilmeldinger.
• Bruk `cy.pause()`-kommandoen: `cy.pause()`-kommandoen pauser kjøringen av testen din og lar deg inspisere tilstanden til applikasjonen i nettleserens utviklerverktøy.
• Bruk `cy.debug()`-kommandoen: `cy.debug()`-kommandoen skriver ut det valgte elementet til konsollen, slik at du kan inspisere dets egenskaper og attributter.
• Bruk nettleserens utviklerverktøy: Nettleserens utviklerverktøy gir et vell av informasjon om applikasjonen din, inkludert DOM, nettverksforespørsler og konsollogger.
• Les feilmeldinger nøye: Cypress gir detaljerte feilmeldinger som kan hjelpe deg med å identifisere årsaken til feilen. Vær oppmerksom på feilmeldingen og stack-sporet.

Cypress vs. andre testrammeverk

Selv om Cypress er et kraftig rammeverk for ende-til-ende-testing, er det viktig å forstå hvordan det kan sammenlignes med andre populære alternativer. Her er en kort oversikt:

• Selenium: Selenium er et mye brukt rammeverk for automatisert testing. Selv om det er fleksibelt og støtter flere språk, kan det være komplekst å sette opp og vedlikeholde. Cypress tilbyr en enklere og mer utviklervennlig opplevelse, spesielt for JavaScript-baserte applikasjoner.
• Puppeteer: Puppeteer er et Node-bibliotek som gir et høynivå-API for å kontrollere hodeløs Chrome eller Chromium. Det er utmerket for web-skraping og automatisering av nettleseroppgaver, men kan kreve mer manuell konfigurasjon sammenlignet med Cypress for ende-til-ende-testing.
• Playwright: Playwright er et annet tverrleser-automatiseringsrammeverk utviklet av Microsoft. Det deler likheter med Puppeteer, men tilbyr bredere nettleserstøtte. Cypress har en unik tidsreise-feilsøker og en mer integrert testopplevelse.

Valget av rammeverk avhenger av prosjektets spesifikke behov og krav. Cypress er et utmerket valg for moderne nettapplikasjoner som krever rask, pålitelig og utviklervennlig ende-til-ende-testing.

Eksempler fra den virkelige verden på Cypress i aksjon

La oss utforske noen eksempler fra den virkelige verden på hvordan Cypress kan brukes til å teste forskjellige typer nettapplikasjoner:

Testing av en e-handelsapplikasjon

Du kan bruke Cypress til å teste forskjellige brukerflyter i en e-handelsapplikasjon, for eksempel:

• Søke etter produkter
• Legge til produkter i handlekurven
• Gå til kassen og legge inn en bestilling
• Administrere kontoinnstillinger

Her er et eksempel på en Cypress-test som verifiserer at en bruker kan legge et produkt i handlekurven:

            
it('Adds a product to the cart', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

            

              
                Copy
              
            
          

Testing av en sosial medie-applikasjon

Du kan bruke Cypress til å teste brukerinteraksjoner i en sosial medie-applikasjon, for eksempel:

• Opprette et nytt innlegg
• Like et innlegg
• Kommentere på et innlegg
• Følge andre brukere

Her er et eksempel på en Cypress-test som verifiserer at en bruker kan opprette et nytt innlegg:

            
it('Creates a new post', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

            

              
                Copy
              
            
          

Testing av en bankapplikasjon

For bankapplikasjoner kan Cypress brukes til å teste kritiske funksjonaliteter som:

• Logge inn sikkert
• Sjekke kontosaldoer
• Overføre penger
• Administrere mottakere

En test for å verifisere en pengeoverføring kan se slik ut (med passende stubbing for sikkerhet):

            
it('Transfers funds successfully', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

            

              
                Copy
              
            
          

Konklusjon

Cypress er et kraftig og allsidig rammeverk for ende-til-ende-testing som kan hjelpe deg med å sikre kvaliteten og påliteligheten til nettapplikasjonene dine. Dets utviklervennlige API, kraftige funksjoner og utmerkede ytelse gjør det til et populært valg blant utviklere og QA-ingeniører over hele verden. Ved å følge beste praksis som er beskrevet i denne guiden, kan du skrive effektive Cypress-tester som vil hjelpe deg med å fange feil tidlig i utviklingsprosessen og levere programvare av høy kvalitet til brukerne dine.

Ettersom nettapplikasjoner fortsetter å utvikle seg, vil viktigheten av ende-til-ende-testing bare øke. Å omfavne Cypress og integrere det i arbeidsflyten din vil gi deg muligheten til å bygge mer robuste, pålitelige og brukervennlige nettopplevelser.